<template>
  <view class="weather-container" v-if="weather">
    <!-- 地点 -->
    <view class="weather-region">
      <uni-icons type="location" size="16" color="#fff"></uni-icons>
      <text class="region">{{ weather.area }}</text>
    </view>
    <!-- 显示温度 气候-->
    <view class="temperature-weather">
      <view class="temperature">{{ weather.temperature }}°</view>
      <view class="weather-icon">
        <image :src="weather.weatherImg"></image>
      </view>
    </view>
    <!-- 其他的天气信息 -->
    <view class="other-info">
      <text class="wind">{{ wind }}</text>
      <view class="humidity">
        湿度
        <text>{{ weather.todayWeather.humidity }}%</text>
      </view>
      <view class="weather-text">
        {{ weather.weather }}
      </view>
    </view>
    <!-- 盒子绘画 -->
    <view class="box1-1"></view>
    <view class="box1-2"></view>
    <view class="box1-3"></view>
    <view class="box2-1"></view>
    <view class="box2-2"></view>
    <view class="box3-1"></view>
    <view class="box3-2"></view>
    <view class="box3-3"></view>
  </view>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex';
export default {
  name: 'weather',
  data () {
    return {
      // 城市id 后期需要修改
      city: 440310
    };
  },
  created () {
    // 在小程序加载完的时候，调用获取数据的方法
    this.getHmWeatherActions();
    // this.getWeatherActions(this.city);
  },
  methods: {
    ...mapActions('home', ['getHmWeatherActions'])
  },
  computed: {
    ...mapState('home', ['weather']),
    wind () {
      return this.weather.windDirection + ' ' + this.weather.windPower;
    }
  }
};
</script>

<style lang="scss" scoped>
.weather-container {
  position: relative;
  height: 200rpx;
  background: linear-gradient(#6ebada, #4f88ff);
  padding: 14rpx 40rpx;
  color: #fff;
  font-size: 32rpx;
  overflow: hidden;

  .weather-region {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 20rpx;

    uni-icons {}

    .region {
      margin-left: 6rpx;
    }
  }

  .temperature-weather {
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    line-height: 100rpx;
    padding: 0 40rpx;

    .temperature {
      font-size: 60rpx;
    }

    .weather-icon {
      width: 100rpx;
      height: 100rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .other-info {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;

    .wind {}

    .humidity {
      text {
        margin-left: 10rpx;
      }
    }

    .weather-text {}
  }

  // 盒子绘画
  .box1-1 {
    position: absolute;
    width: 55%;
    height: 145rpx;
    bottom: 0;
    left: 0;
    transform: translate(-50%, 91%);
    background-color: white;
    border-radius: 100%;
  }

  .box1-2 {
    position: absolute;
    width: 75%;
    height: 145rpx;
    bottom: 0;
    left: 0;
    transform: translate(8%, 92%);
    background-color: white;
    border-radius: 100%;
  }

  .box1-3 {
    position: absolute;
    width: 60%;
    height: 145rpx;
    bottom: 0;
    left: 0;
    transform: translate(118%, 90%);
    background-color: white;
    border-radius: 100%;
  }

  .box2-1 {
    position: absolute;
    width: 65%;
    height: 145rpx;
    bottom: 0;
    left: 0;
    transform: translate(-15%, 78%);
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 100%;
  }

  .box2-2 {
    position: absolute;
    width: 95%;
    height: 145rpx;
    bottom: 0;
    left: 0;
    transform: translate(33%, 85%);
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 100%;
  }

  .box3-1 {
    position: absolute;
    width: 46%;
    height: 145rpx;
    bottom: 0;
    left: 0;
    transform: translate(-60%, 68%);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 100%;
  }

  .box3-2 {
    position: absolute;
    width: 42%;
    height: 145rpx;
    bottom: 0;
    left: 0;
    transform: translate(87%, 81%);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 100%;
  }

  .box3-3 {
    position: absolute;
    width: 43%;
    height: 145rpx;
    bottom: 0;
    left: 0;
    transform: translate(157%, 77%) rotate(-15deg);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 100%;
  }
}
</style>
